<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- qquickstateoperations.cpp -->
  <title>ParentChange QML 类型 | Qt Quick 5.12.3</title>
  <link rel="stylesheet" type="text/css" href="style/offline-simple.css" />
  <script type="text/javascript">
    document.getElementsByTagName("link").item(0).setAttribute("href", "style/offline.css");
    // loading style sheet breaks anchors that were jumped to before
    // so force jumping to anchor again
    setTimeout(function() {
        var anchor = location.hash;
        // need to jump to different anchor first (e.g. none)
        location.hash = "#";
        setTimeout(function() {
            location.hash = anchor;
        }, 0);
    }, 0);
  </script>
</head>
<body>
<div class="header" id="qtdocheader">
  <div class="main">
    <div class="main-rounded">
      <div class="navigationbar">
        <table><tr>
<td ><a href="../qtdoc/index.html">Qt 5.12</a></td><td ><a href="qtquick-index.html">Qt Quick 模块</a></td><td ><a href="qtquick-qmlmodule.html">QML类型</a></td><td >ParentChange QML 类型</td></tr></table><table class="buildversion"><tr>
<td id="buildversion" width="100%" align="right"><a href="qtquick-index.html">Qt 5.12.3 参考指南</a></td>
        </tr></table>
      </div>
    </div>
<div class="content">
<div class="line">
<div class="content mainContent">
<div class="sidebar">
<div class="toc">
<h3><a name="toc">目录</a></h3>
<ul>
<li class="level1"><a href="#properties">属性</a></li>
<li class="level1"><a href="#details">详细信息</a></li>
</ul>
</div>
<div class="sidebar-content" id="sidebar-content"></div></div>
<h1 class="title">ParentChange QML 类型</h1>
<span class="subtitle"></span>
<!-- $$$ParentChange-brief -->
<p>Specifies how to reparent an Item in a state change. <a href="#details">更多...</a></p>
<!-- @@@ParentChange -->
<div class="table"><table class="alignedsummary">
<tr><td class="memItemLeft rightAlign topAlign"> 导入语句：</td><td class="memItemRight bottomAlign"> import QtQuick 2.12</td></tr></table></div><ul>
<li><a href="qml-qtquick-parentchange-members.html">所有成员的列表，包括继承成员</a></li>
</ul>
<a name="properties"></a>
<h2 id="properties">属性</h2>
<ul>
<li class="fn"><b><b><a href="qml-qtquick-parentchange.html#height-prop">height</a></b></b> : real</li>
<li class="fn"><b><b><a href="qml-qtquick-parentchange.html#parent-prop">parent</a></b></b> : Item</li>
<li class="fn"><b><b><a href="qml-qtquick-parentchange.html#rotation-prop">rotation</a></b></b> : real</li>
<li class="fn"><b><b><a href="qml-qtquick-parentchange.html#scale-prop">scale</a></b></b> : real</li>
<li class="fn"><b><b><a href="qml-qtquick-parentchange.html#target-prop">target</a></b></b> : Item</li>
<li class="fn"><b><b><a href="qml-qtquick-parentchange.html#width-prop">width</a></b></b> : real</li>
<li class="fn"><b><b><a href="qml-qtquick-parentchange.html#x-prop">x</a></b></b> : real</li>
<li class="fn"><b><b><a href="qml-qtquick-parentchange.html#y-prop">y</a></b></b> : real</li>
</ul>
<!-- $$$ParentChange-description -->
<a name="details"></a>
<h2 id="details">详细信息</h2>
<p><a href="qml-qtquick-parentchange.html">ParentChange</a> reparents an item while preserving its visual appearance (position, size, rotation, and scale) on screen. You can then specify a transition to move/resize/rotate/scale the item to its final intended appearance.</p>
<p><a href="qml-qtquick-parentchange.html">ParentChange</a> can only preserve visual appearance if no complex transforms are involved. More specifically, it will not work if the transform property has been set for any items involved in the reparenting (i.e&#x2e; items in the common ancestor tree for the original and new parent).</p>
<p>The example below displays a large red rectangle and a small blue rectangle, side by side. When the <code>blueRect</code> is clicked, it changes to the &quot;reparented&quot; state: its parent is changed to <code>redRect</code> and it is positioned at (10, 10) within the red rectangle, as specified in the <a href="qml-qtquick-parentchange.html">ParentChange</a>.</p>
<pre class="qml">

  import QtQuick 2.0

  <span class="type"><a href="qml-qtquick-item.html">Item</a></span> {
      <span class="name">width</span>: <span class="number">200</span>; <span class="name">height</span>: <span class="number">100</span>

      <span class="type"><a href="qml-qtquick-rectangle.html">Rectangle</a></span> {
          <span class="name">id</span>: <span class="name">redRect</span>
          <span class="name">width</span>: <span class="number">100</span>; <span class="name">height</span>: <span class="number">100</span>
          <span class="name">color</span>: <span class="string">&quot;red&quot;</span>
      }

      <span class="type"><a href="qml-qtquick-rectangle.html">Rectangle</a></span> {
          <span class="name">id</span>: <span class="name">blueRect</span>
          <span class="name">x</span>: <span class="name">redRect</span>.<span class="name">width</span>
          <span class="name">width</span>: <span class="number">50</span>; <span class="name">height</span>: <span class="number">50</span>
          <span class="name">color</span>: <span class="string">&quot;blue&quot;</span>

          <span class="name">states</span>: <span class="name">State</span> {
              <span class="name">name</span>: <span class="string">&quot;reparented&quot;</span>
              <span class="type"><a href="qml-qtquick-parentchange.html">ParentChange</a></span> { <span class="name">target</span>: <span class="name">blueRect</span>; <span class="name">parent</span>: <span class="name">redRect</span>; <span class="name">x</span>: <span class="number">10</span>; <span class="name">y</span>: <span class="number">10</span> }
          }

          <span class="type"><a href="qml-qtquick-mousearea.html">MouseArea</a></span> { <span class="name">anchors</span>.fill: <span class="name">parent</span>; <span class="name">onClicked</span>: <span class="name">blueRect</span>.<span class="name">state</span> <span class="operator">=</span> <span class="string">&quot;reparented&quot;</span> }
      }
  }

</pre>
<p class="centerAlign"><img src="images/parentchange.png" alt="" /></p><p>You can specify at which point in a transition you want a <a href="qml-qtquick-parentchange.html">ParentChange</a> to occur by using a <a href="qml-qtquick-parentanimation.html">ParentAnimation</a>.</p>
<p>Note that unlike <a href="qml-qtquick-propertychanges.html">PropertyChanges</a>, <a href="qml-qtquick-parentchange.html">ParentChange</a> expects an Item-based target; it will not work with arbitrary objects (for example, you couldn't use it to reparent a Timer).</p>
<!-- @@@ParentChange -->
<h2>属性文档</h2>
<!-- $$$height -->
<div class="qmlitem"><div class="qmlproto">
<div class="table"><table class="qmlname">
<tr valign="top" class="odd" id="height-prop">
<td class="tblQmlPropNode"><p>
<a name="height-prop"></a><span class="name">height</span> : <span class="type"><a href="../qtqml/qml-real.html">real</a></span></p></td></tr>
</table></div>
</div><div class="qmldoc"><p>These properties hold the new position, size, scale, and rotation for the item in this state.</p>
</div></div><!-- @@@height -->
<br/>
<!-- $$$parent -->
<div class="qmlitem"><div class="qmlproto">
<div class="table"><table class="qmlname">
<tr valign="top" class="odd" id="parent-prop">
<td class="tblQmlPropNode"><p>
<a name="parent-prop"></a><span class="name">parent</span> : <span class="type"><a href="qml-qtquick-item.html">Item</a></span></p></td></tr>
</table></div>
</div><div class="qmldoc"><p>This property holds the new parent for the item in this state.</p>
</div></div><!-- @@@parent -->
<br/>
<!-- $$$rotation -->
<div class="qmlitem"><div class="qmlproto">
<div class="table"><table class="qmlname">
<tr valign="top" class="odd" id="rotation-prop">
<td class="tblQmlPropNode"><p>
<a name="rotation-prop"></a><span class="name">rotation</span> : <span class="type"><a href="../qtqml/qml-real.html">real</a></span></p></td></tr>
</table></div>
</div><div class="qmldoc"><p>These properties hold the new position, size, scale, and rotation for the item in this state.</p>
</div></div><!-- @@@rotation -->
<br/>
<!-- $$$scale -->
<div class="qmlitem"><div class="qmlproto">
<div class="table"><table class="qmlname">
<tr valign="top" class="odd" id="scale-prop">
<td class="tblQmlPropNode"><p>
<a name="scale-prop"></a><span class="name">scale</span> : <span class="type"><a href="../qtqml/qml-real.html">real</a></span></p></td></tr>
</table></div>
</div><div class="qmldoc"><p>These properties hold the new position, size, scale, and rotation for the item in this state.</p>
</div></div><!-- @@@scale -->
<br/>
<!-- $$$target -->
<div class="qmlitem"><div class="qmlproto">
<div class="table"><table class="qmlname">
<tr valign="top" class="odd" id="target-prop">
<td class="tblQmlPropNode"><p>
<a name="target-prop"></a><span class="name">target</span> : <span class="type"><a href="qml-qtquick-item.html">Item</a></span></p></td></tr>
</table></div>
</div><div class="qmldoc"><p>This property holds the item to be reparented</p>
</div></div><!-- @@@target -->
<br/>
<!-- $$$width -->
<div class="qmlitem"><div class="qmlproto">
<div class="table"><table class="qmlname">
<tr valign="top" class="odd" id="width-prop">
<td class="tblQmlPropNode"><p>
<a name="width-prop"></a><span class="name">width</span> : <span class="type"><a href="../qtqml/qml-real.html">real</a></span></p></td></tr>
</table></div>
</div><div class="qmldoc"><p>These properties hold the new position, size, scale, and rotation for the item in this state.</p>
</div></div><!-- @@@width -->
<br/>
<!-- $$$x -->
<div class="qmlitem"><div class="qmlproto">
<div class="table"><table class="qmlname">
<tr valign="top" class="odd" id="x-prop">
<td class="tblQmlPropNode"><p>
<a name="x-prop"></a><span class="name">x</span> : <span class="type"><a href="../qtqml/qml-real.html">real</a></span></p></td></tr>
</table></div>
</div><div class="qmldoc"><p>These properties hold the new position, size, scale, and rotation for the item in this state.</p>
</div></div><!-- @@@x -->
<br/>
<!-- $$$y -->
<div class="qmlitem"><div class="qmlproto">
<div class="table"><table class="qmlname">
<tr valign="top" class="odd" id="y-prop">
<td class="tblQmlPropNode"><p>
<a name="y-prop"></a><span class="name">y</span> : <span class="type"><a href="../qtqml/qml-real.html">real</a></span></p></td></tr>
</table></div>
</div><div class="qmldoc"><p>These properties hold the new position, size, scale, and rotation for the item in this state.</p>
</div></div><!-- @@@y -->
<br/>
        </div>
       </div>
   </div>
   </div>
</div>
<div class="footer">
   <p>
   <acronym title="Copyright">&copy;</acronym> 2019 The Qt Company Ltd.
   Documentation contributions included herein are the copyrights of
   their respective owners.<br/>    The documentation provided herein is licensed under the terms of the    <a href="http://www.gnu.org/licenses/fdl.html">GNU Free Documentation    License version 1.3</a> as published by the Free Software Foundation.<br/>    Qt and respective logos are trademarks of The Qt Company Ltd.     in Finland and/or other countries worldwide. All other trademarks are property
   of their respective owners. </p>
</div>
</body>
</html>
